/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import { ListView ,Toast , Menu, ActivityIndicator, NavBar  } from 'antd-mobile';
import {connect}  from 'react-redux'
import React, { useState,useEffect } from 'react';
// 自定义hooks
import {useWinSize} from './test'
import {getvideo ,getvideobytype} from '../../../network/video'
import {Tag} from 'antd'
import {check_login } from '../../../tool'

import {Spin} from 'antd'

import './video.css'

const Video =  (props) => {
  
  const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
  });

  const menudata = [{
    value: '1',
    label: '素材',
    children:[{
      value: 3,
      label: '空镜头',
    },{
      value: 4,
      label: '教学活动',
    },{
      value: 5,
      label: '文化活动',
    }]
  },{
    value: '2',
    label: '成片',
    children:[{
      value: 1,
      label: '采访',
    },{
      value: 2,
      label: '会晤',
    },{
      value: 6,
      label: '微视频',
    }]

  }]


  const size = useWinSize()
  const [video_list,setvideo_list] = useState({})
  const [isitemLoading,setisitemLoading] = useState(false)
  const [islistLoading,setislistLoading] = useState(true)
  const [showmenu,setshowmenu] = useState(false)
  const [type,setstype] = useState([])
  const [istypevideo,setistypevideo] =useState(false)
    

  useEffect(()=>{
    
      if(check_login(props.identity))
        {
          get_news(1,15)
        }
        else {
          Toast.info('请先登录！',2,()=>{  
          props.history.push({pathname:'/main/profile'})
        })
      }
  },[]) 



  const get_news = async(page_num,page_size) => {
      const res = await getvideo(page_num,page_size)
      const data = res.data
      if (data.isFirstPage)
      {
        const list = {
          pageNum : data.pageNum, //当前页
          pageSize : page_size ,//每次请求数据条数
          rows: data.list,
          hasmore: data.hasNextPage,
          totalPage: Math.ceil(data.total / page_size)   //总页数
        }
        setvideo_list(list)
        setislistLoading(false)
      }
      else 
      {
        const list = {
          pageNum : data.pageNum, //当前页
          pageSize : page_size ,//每次请求数据条数
          rows: [...video_list.rows,...data.list],
          hasmore: data.hasNextPage,
          totalPage: Math.ceil(data.total / page_size)   //总页数
        }
        setvideo_list(list)
      }
               
      
  }

  const get_video_bytype = async(v,page_num,page_size) =>{
    const video_res = await getvideobytype(v,page_num,page_size)
    if (video_res.data.isFirstPage)
   { 
    const list = {
    pageNum : video_res.data.pageNum, //当前页
    pageSize : video_res.data.size ,//每次请求数据条数
    rows: video_res.data.list,
    hasmore: video_res.data.hasNextPage,
    totalPage: Math.ceil(video_res.data.total / video_res.data.size)   //总页数
   }
   console.log(list);
    setvideo_list(list)
  }
  else{
    const list = {
      pageNum : video_res.data.pageNum, //当前页
      pageSize : video_res.data.size ,//每次请求数据条数
      rows: [...video_list.rows,...video_res.data.list],
      hasmore: video_res.data.hasNextPage,
      totalPage: Math.ceil(video_res.data.total / video_res.data.size)   //总页数
     }
     console.log(list);
      setvideo_list(list)
  }
  }

  const onEndReached = (pagenum,hasmore) => {
    
    
    console.log('reach end');
    setisitemLoading(true);
    if(hasmore)
    {
      if(istypevideo) get_video_bytype(type[1],pagenum+1,15)
      else get_news(pagenum+1,15)
    }
    else{
      setisitemLoading(false);
    }
    
    
  }

  


  const onscroll = (e) =>{
    console.log(e);
  }

  const row = (item,_,i) => {
    const onclick = (value) =>{
      props.history.push({pathname:'video/detail',state:{video_info:value}})
    }
    const keywordArray = item.keywords.trim().split(" ")
    return (    
       
      <div key={item.id} style={{ textAlign:'center',  alignItems:'center' , padding: '0 15px',border:'1px dotted #F6F6F6' }} onClick={()=>onclick(item)}>
        <img style={{height:'180px'}} src={item.cover}/>
        <div className="videoitem_down">
          <div className="videoitem_dleft">
            <div className="videoname">
              {item.videoname}
            </div>
            <div className="uploadtime">
              {item.uploadTime}
            </div>
          </div>

          <div className="videoitem_dright">
            <Tag color="#2db7f5">{keywordArray[0]}</Tag>
          
            
          </div>
          
          
        </div>

      </div>
    );
  };

  const separator = (sectionId,row_num) => {
    
    return (
    <div 
    
      key ={row_num}
      style={{
        backgroundColor: '#F5F5F9',
        height: 8,
        borderTop: '1px solid #ECECED',
        borderBottom: '1px solid #ECECED',
      }}
    />)
    }

 

  const clickmenu = () => {
    setshowmenu(true)
  }

  const menuonchange = (value) =>{
    setstype(value)
  }

  const onmenuOk = (v) =>{
    setstype(v)
    get_video_bytype(v[1],1,15)
    setistypevideo(true)
    setshowmenu(false)
  }

  const onMaskClick = () => {
    setshowmenu(false)
  }

  return (
        <div>

       
        <NavBar 
          leftContent="类型" 
          mode="dark"
          onLeftClick={clickmenu} 
          className="multi-top-nav-bar">

        视频
        </NavBar>
        {showmenu ? <Menu 
                      className="multi-foo-menu"
                      data={menudata}
                      value={type}
                      onChange={menuonchange}
                      onOk={onmenuOk}
                      onCancel={()=>{setshowmenu(false)}}
                      height={document.documentElement.clientHeight * 0.6}
                      multiSelect> 
                      </Menu> 
        :null}
        {
          showmenu ? <div className ="menu-mask" onClick = {onMaskClick} /> :null
        }
        <Spin spinning = {islistLoading}>
        {
          video_list && video_list.rows && video_list.rows.length ?
          
          <ListView
          
          dataSource={dataSource.cloneWithRows(video_list.rows)}
          
          initialListSize={10}
          pageSize={15}
          renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
            <Spin spinning={isitemLoading}></Spin>
            { video_list.hasmore ? null : <div>暂无更多视频</div>}
          </div>)}
         
          // renderBodyComponent={() => <MyBody />}
          renderRow={(rowData,id1,i)=>row(rowData,id1,i)}
          renderSeparator={separator}
          style={{
            position:'absolute',
            top:'0px',
            width:'100vw',
            height:'calc(100vh - 139px)',
          
           
            
            
          }}
          pageSize={4}
          onScroll={() => { }}
          // scrollRenderAheadDistance={500}
          
          onEndReached={()=>onEndReached(video_list.pageNum,video_list.hasmore)}
          onEndReachedThreshold={15}
        />
         
       
        :
        video_list && video_list.rows && !video_list.rows.length ?
          <div>暂无数据</div> : null
        }
        </Spin>

        </div>
        
     
     
    );
  
}


const mapState2Props = (state) => 
    ({
               
    identity : state.getIn(['login','identity']),
                
    })       
                 

export default connect(mapState2Props,)(Video);

